<template>
  <div>
    {{ glist }}
    <div>
      <h3>添加分类</h3>
      <div>
        名字：<el-input type="text" v-model="name" placeholder style="width:200px"></el-input>
        <el-button @click="addtype">添加分类</el-button>
      </div>
    </div>
    <div>
      <h3>添加商品</h3>
      <div>
        名字：<el-input type="text" v-model="goods.name" style="width:200px"></el-input>
        价格：<el-input type="text" v-model="goods.price" style="width:200px"></el-input>
        图片：<el-input type="text" v-model="goods.url" style="width:200px"></el-input>
        类别：<el-input type="text" v-model="goods.gid" style="width:200px"></el-input>
        <el-button @click="addgoods">添加商品</el-button>
      </div>
    </div>
    <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :before-upload="upload">
  <img :src="goods.url" width="150px" height="150px">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<div>
      <button @click="getgoods()">全部</button>
      <div v-for="(i,index) in tlist" :key="index">
        <button @click="getgoods(i.id)">{{ i.name }}</button>
      </div>
      <!-- <el-pagination
  background
  layout="prev, pager, next"
  :total="total"
  :page-size="page_size"
  @current-change="change">
</el-pagination> -->
    </div>
    <div>
      <div v-for="(i,index) in glist" :key="index">
        <div><img :src="i.url" width="100px" height="100px"></div>
        <div>{{ i.gid }}</div>
        <div>{{ i.price }}</div>
        <div>{{ i.name }}</div>
        <el-button @click="getgood(i.id)">修改</el-button>
        <el-button @click="del(i.id)">删除</el-button>
      </div>
    </div>
    <div>
      id: <el-input type="text" v-model="goodss.id" style="width:200px"></el-input>
      名字：<el-input type="text" v-model="goodss.name" style="width:200px"></el-input>
      价格：<el-input type="text" v-model="goodss.price" style="width:200px"></el-input>
      图片：<el-input type="text" v-model="goodss.url" style="width:200px"></el-input>
      类别：<el-input type="text" v-model="goodss.gid" style="width:200px"></el-input>
      <el-button @click="update(i.id)">修改商品</el-button>
    </div>
  </div> 

  
</template>

<script>

export default {
  data(){
    return{
      total:0,
      page_size:0,
      tlist:[],
      glist:[],
      name:"",
      page:1,
      types:0,
      goods:{
        id:0,
        name:'',
        price:0,
        url:'',
        gid:0
      },
      goodss:{
        id:0,
        name:'',
        price:0,
        url:'',
        gid:0
      }
    }
  },
  methods:{
    addtype(){
      this.axios.post('/addgood_type',{name:this.name}).then(res=>{
        if(res.data.code == 200){
          alert(res.data.mes)
        }
      })
    },
    addgoods(){
      var name = this.goods.name
      var price = this.goods.price
      var url = this.goods.url
      var gid = this.goods.gid
      this.axios.post('/addgoods',{name:name,price:price,url:url,gid:gid}).then(res=>{
        if(res.data.code == 200){
          alert(res.data.mes)
        }
      })
    },
    getgoodtype(){
      this.axios.get('/gettype').then(res=>{
        this.tlist = res.data.list
      })
    },
    // changeTypes(id){
    //         this.types=id
    //         this.page = 1
    //         this.getCourse()
    // },
    upload(file){
      var data = new FormData()
      data.append('file',file)
      this.axios.post('/upload',data).then(res=>{
        this.goods.url = "http://localhost:8000/"+res.data.url
      })
    },
    getgoods(id){
      var qqid = id
      var adm = ""
      if (qqid==null){
        adm = "getgoods"
      }else{
        adm = "getgoods?id="+qqid
      }
      this.axios.get(adm).then((res) => {
        this.glist = res.data.list
      })
    },
    del(id){
      this.axios.delete('del_good?id='+id).then(res=>{
        if(res.data.code==200){
          alert(res.data.mes)
        }
      })
    },
    getgood(id){
      this.axios.get('getgood/'+id).then(res=>{
        this.goodss = res.data.list
        this.goodss = this.goodss[0]
      })
    },
    update(id){
    }
  },
  mounted(){
    this.getgoodtype()
    this.getgoods()
  }
}
</script>

<style>

</style>